<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="fragments/layout :: layout(~{::title}, ~{::section})">

<head>
    <title>注册 - 图书馆管理系统</title>
</head>

<body>
    <section>
        <style>
            .register-page {
                min-height: 100vh;
                background-image: url('/img/bg.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                padding: 40px 0;
                position: relative;
            }

            .register-page::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 0;
            }

            .register-container {
                position: relative;
                z-index: 1;
            }

            .register-card {
                background-color: rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            }

            .register-header {
                background-color: #2c3e50;
                color: white;
                border-radius: 10px 10px 0 0;
                padding: 20px;
                text-align: center;
            }

            .register-body {
                padding: 30px;
            }

            .register-footer {
                background-color: #f8f9fa;
                border-radius: 0 0 10px 10px;
                padding: 20px;
            }

            .btn-register {
                background-color: #2c3e50;
                border-color: #2c3e50;
                padding: 10px;
                font-weight: bold;
                letter-spacing: 1px;
                transition: all 0.3s;
            }

            .btn-register:hover {
                background-color: #1a252f;
                border-color: #1a252f;
                transform: translateY(-2px);
            }

            .form-control {
                border-radius: 5px;
                padding: 10px;
                height: auto;
            }

            .form-group {
                margin-bottom: 20px;
            }

            .form-text {
                color: #6c757d;
            }
        </style>

        <div class="register-page">
            <div class="container register-container">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="card register-card">
                            <div class="register-header">
                                <h3 class="mb-0">图书馆管理系统</h3>
                                <p class="mt-2 mb-0">用户注册</p>
                            </div>
                            <div class="register-body">
                                <div id="registerForm">
                                    <div class="form-group">
                                        <label for="username"><i class="fas fa-user mr-2"></i>用户名</label>
                                        <input type="text" class="form-control" id="username" name="username"
                                            placeholder="请输入用户名" required>
                                        <small class="form-text">用户名用于登录，不能重复</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="password"><i class="fas fa-lock mr-2"></i>密码</label>
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="请输入密码" required>
                                        <small class="form-text">密码长度至少6位</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="confirmPassword"><i
                                                class="fas fa-check-circle mr-2"></i>确认密码</label>
                                        <input type="password" class="form-control" id="confirmPassword"
                                            name="confirmPassword" placeholder="请再次输入密码" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="name"><i class="fas fa-id-card mr-2"></i>姓名</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            placeholder="请输入真实姓名" required>
                                    </div>
                                    <div class="form-group">
                                        <label><i class="fas fa-venus-mars mr-2"></i>性别</label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="male"
                                                    value="1" checked>
                                                <label class="form-check-label" for="male">男</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="female"
                                                    value="2">
                                                <label class="form-check-label" for="female">女</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone"><i class="fas fa-phone mr-2"></i>手机号码</label>
                                        <input type="tel" class="form-control" id="phone" name="phone"
                                            placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-group">
                                        <label for="email"><i class="fas fa-envelope mr-2"></i>电子邮箱</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            placeholder="请输入电子邮箱">
                                    </div>
                                    <button type="button" onclick="register()"
                                        class="btn btn-primary btn-block btn-register">
                                        <i class="fas fa-user-plus mr-2"></i>注册
                                    </button>
                                </div>
                            </div>
                            <div class="register-footer text-center">
                                <div class="mt-2">
                                    <p>已有账号？<a href="/login" class="font-weight-bold">立即登录</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 页面加载完成后执行
            document.addEventListener('DOMContentLoaded', function () {
                console.log('注册页面已加载');

                // 如果已经登录，直接跳转到首页
                if (localStorage.getItem('isLoggedIn') === 'true') {
                    window.location.href = '/';
                }
            });

            // 注册函数
            function register() {
                console.log('注册按钮被点击');

                // 获取表单数据
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;
                var confirmPassword = document.getElementById('confirmPassword').value;
                var name = document.getElementById('name').value;
                var gender = document.querySelector('input[name="gender"]:checked').value;
                var phone = document.getElementById('phone').value;
                var email = document.getElementById('email').value;

                // 表单验证
                if (!username) {
                    alert('请输入用户名');
                    return;
                }
                if (!password) {
                    alert('请输入密码');
                    return;
                }
                if (password.length < 6) {
                    alert('密码长度至少6位');
                    return;
                }
                if (password !== confirmPassword) {
                    alert('两次输入的密码不一致');
                    return;
                }
                if (!name) {
                    alert('请输入姓名');
                    return;
                }

                // 构建用户数据
                var userData = {
                    username: username,
                    password: password,
                    name: name,
                    gender: gender,
                    phone: phone,
                    email: email,
                    role: 1, // 普通用户
                    status: 1 // 正常状态
                };

                console.log('注册数据:', userData);

                // 发送注册请求
                $.ajax({
                    url: '/user/api/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(userData),
                    success: function(res) {
                        if (res.code === 200) {
                            alert('注册成功！请使用新账号登录');
                            window.location.href = '/login';
                        } else {
                            alert('注册失败：' + res.message);
                        }
                    },
                    error: function() {
                        alert('服务器错误，请稍后再试！');
                    }
                });
            }
        </script>
    </section>
</body>

</html>